<!--
* @description:货主合同跟踪
* @fileName: ShipperContractTracking
* @author:石锦涛
* @date:2022-01-20
* @后台人员:石锦涛
-->
<template>
  <div>
    <div>
      <el-row :span="1">
        <el-col :span="1">合同标题:</el-col>
        <el-col :span="3"><input v-model="telets" /></el-col>
        <el-col :span="1">货主单位:</el-col>
        <el-col :span="3"><input v-model="danwei" /></el-col>
        <el-col :span="1.5">货主负责人:</el-col>
        <el-col :span="3"><input v-model="principal" /></el-col>
      </el-row>
      <el-row :span="1">
        <el-col :span="1">经办人:</el-col>
        <el-col :span="3"><input v-model="operators" /></el-col>
        <el-col :span="1">签订时间:</el-col>
        <el-col :span="3"><input type="Date" v-model="dtime" /></el-col>
        <el-col :span="1"><button @click="showNewow()">查询</button></el-col>
        <el-col :span="1"><button @click="chongzhi()">重置</button></el-col>
      </el-row>
      <el-row :span="1">
        <el-col :span="3"
          ><el-button @click="deleteMores()">删除</el-button></el-col
        >
      </el-row>
    </div>
    <!-- 货主合同管理 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="TheShipContractNO" label="合同编号" width="200">
      </el-table-column>
      <el-table-column prop="TheContractTitle" label="合同标题" width="100">
      </el-table-column>
      <el-table-column prop="TheOwnerUnit" label="货主单位" width="100">
      </el-table-column>
      <el-table-column prop="FreightPrincipal" label="货主负责人" width="100">
      </el-table-column>
      <el-table-column prop="LineName" label="线路" width="100">
      </el-table-column>
      <el-table-column prop="TonsOfFreight" label="吨运价" width="80">
      </el-table-column>
      <el-table-column prop="ConditionTonnage" label="包车条件吨价" width="110">
      </el-table-column>
      <el-table-column prop="CharterValue" label="包车金额" width="100">
      </el-table-column>
      <el-table-column prop="SignedTimes" label="签订日期" width="100">
      </el-table-column>
      <el-table-column prop="Agent" label="经办人" width="100">
      </el-table-column>
      <el-table-column prop="SignedTime" label="创建时间" width="100">
      </el-table-column>
      <el-table-column label="异常警报" width="80">
        <template slot-scope="scope">
          <span>
            {{
              scope.row.AbnormityWarning == 0
                ? "  -  "
                : scope.row.AbnormityWarning == 1
                ? "正常"
                : scope.row.AbnormityWarning == 2
                ? "异常"
                : "  -  "
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="运货状态" width="100">
        <template slot-scope="scope">
          {{
            scope.row.FreightState == 0
              ? "未起运"
              : scope.row.FreightState == 1
              ? "运输中"
              : "已完成"
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <a href="#" @click="deletesc(scope.row)">删除</a>&nbsp;
          <a
            href="#"
            v-if="scope.row.FreightState == 0 || scope.row.FreightState == 1"
            @click="zhuangTai(scope.row)"
            >{{ scope.row.FreightState == 0 ? "发货" : "签收" }}</a
          >&nbsp;
          <a
            href="#"
            v-if="
              scope.row.AbnormityWarning == 0 ||
              scope.row.AbnormityWarning == 1 ||
              scope.row.AbnormityWarning == 2 ||
              scope.row.AbnormityWarning == 3
            "
            @click="genZhong(scope.row)"
            >{{
              scope.row.AbnormityWarning == 0
                ? "定义路线"
                : scope.row.AbnormityWarning == 3
                ? "跟踪记录"
                : "在线跟踪"
            }}</a
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageindex"
      :page-sizes="[1, 3, 5, 7]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      multipleSelection: [],
      tableData: [],
      telets: "",
      danwei: "",
      principal: "",
      operators: "",
      dtime: "",
      state: "",
      totalCount: 0,
      pageindex: 1,
      pagesize: 5,

      dialogFormVisible: false,
      dialogFormVisible1: false,

      options: [],
      ids: [],
      fa: [],
      sho: [],

      jieshu: {
        Id: "",
        TheShipContractNO: "",
        TheContractTitle: "",
        TheOwnerUnit: "",
        FreightPrincipal: "",
        Line: "",
        TonsOfFreight: "",
        ConditionTonnage: "",
        CharterValue: "",
        Agent: "",
        SignedTime: "",
        TheContractAmount: "",
        ProjectDescriptio: "",
        ChangeTheTerms: "",
        ContractTheText: "",
        ContractStates: "",
        TheApprover: "",
        IsDelete: "",
        AbnormityWarning: "",
        FreightState: "",
      },
    };
  },
  methods: {
    //多选
    handleSelectionChange(val) {
      this.ids = [];
      this.multipleSelection = val;
      for (let index = 0; index < val.length; index++) {
        this.ids.push(val[index].GId);
      }
    },
    //分页
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.showNewow();
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.pageindex = val;
      this.showNewow();
    },
    //显示数据
    showNewow() {
      this.$axios
        .get(
          "https://localhost:44399/api/app/new-owner-app/new-owners?telet=" +
            this.telets +
            "&danwei=" +
            this.danwei +
            "&principal=" +
            this.principal +
            "&operators=" +
            this.operators +
            "&dtime=" +
            this.dtime +
            "&state=" +
            this.state +
            "&pageindex=" +
            this.pageindex +
            "&pagesize=" +
            this.pagesize +
            ""
        )
        .then((res) => {
          this.tableData = res.data.PageData;
          this.totalCount = res.data.PageTotal;
          this.fa = this.tableData.FreightState;
          this.sho = this.tableData.FreightState;
        });
    },
    //重置
    chongzhi() {
      (this.telets = ""),
        (this.danwei = ""),
        (this.principal = ""),
        (this.operators = ""),
        (this.dtime = ""),
        (this.state = "");
      this.showNewow();
    },
    //删除
    deletesc(row) {
      if (confirm("是否确定删除")) {
        this.$axios
          .delete(
            "https://localhost:44399/api/app/new-owner-app/page-delet/" +
              row.GId +
              ""
          )
          .then((res) => {
            if (res.data.Code > 0) {
              alert("删除成功");
              this.showNewow();
            } else {
              alert("删除失败");
              this.showNewow();
            }
          });
      }
    },
    //显示线路
    xianlu() {
      this.$axios
        .get("https://localhost:44399/api/app/line-app/page")
        .then((res) => {
          this.options = res.data;
        });
    },
    //批量删除
    deleteMores() {
      if (this.ids.length === 0) {
        alert("请选择数据");
        return;
      }
      if (confirm("是否确定删除")) {
        this.$axios
          .delete(
            "https://localhost:44399/api/app/new-owner-app/delet-emore-new-owner/" +
              this.ids.toString()
          )
          .then((res) => {
            if (res.data.Code > 0) {
              alert("删除成功");
              this.showNewow();
            } else {
              alert("删除失败");
            }
          });
      }
    },
    //运货状态
    zhuangTai(row) {
      this.jieshu = row;

      if (row.FreightState === 0) {
        if (row.AbnormityWarning === 0) {
          alert("请先定义路线");
          return;
        }

        if (confirm("是否确定发货")) {
          this.$axios
            .put(
              "https://localhost:44399/api/app/new-owner-app/fahuo-new-owner",
              this.jieshu
            )
            .then((res) => {
              if (res.data.Code > 0) {
                alert("成功发货");
                this.showNewow();
              }
            });
        }
      }
      if (row.FreightState === 1) {
        if (confirm("是否确定签收")) {
          this.$axios
            .put(
              "https://localhost:44399/api/app/new-owner-app/qian-sho-new-owner",
              this.jieshu
            )
            .then((res) => {
              if (res.data.Code > 0) {
                alert("成功签收");
                this.showNewow();
              }
            });
        }
      }
    },
    //跟踪
    genZhong(row) {
      if (row.AbnormityWarning === 0) {
        alert("定义路线");
      }
      if (row.AbnormityWarning === 1) {
        alert("在线跟踪-正常");
        //传值
        sessionStorage.setItem("userid", row.Line);
        this.$router.push("/OnlineTraceException");
      }
      if (row.AbnormityWarning === 2) {
        alert(
          "在线跟踪-异常");
        //传值
        sessionStorage.setItem("userid", row.Line);
        this.$router.push("/OnlineTraceException");
      }
      if (row.AbnormityWarning === 3) {
        alert("跟踪记录");
        //传值
        sessionStorage.setItem("userid", row.Line);
        this.$router.push("/OnlineTraceException");
      }
    },
  },
  created() {
    this.showNewow();
    this.xianlu();
  },
};
</script>

<style>
</style>